<template>
  <div class="spl-container tax-teport-detail-container">
    <breadcrumb :data="pathData"></breadcrumb>

    <div class="content-tb">
      <div class="search-row m-form">
        <el-input placeholder="请输入工号、姓名、证照号码" class="ml-20 w-220" v-model="searchWord"></el-input>
        <el-button type="primary" class="search-btn" icon="el-icon-search" @click="getTableData"></el-button>

        <div class="search-row-btn">
          <el-button type="primary" class="opt-btn green-btn" icon="ic-export" @click="exportDetail">导出</el-button>
          <router-link to="/taxReport">
            <el-button type="primary" class="opt-btn green-btn" icon="el-icon-back">返回</el-button>
          </router-link>
        </div>
      </div>
      <p class="mt-5 ml-20" v-text="'扣缴义务人：'+withholdingAgent"></p>
      <dTable @fetch="getTableData" ref="empTable" :tableHeight="tableHeight">
        <el-table-column prop="employeeCode" label="工号" width="150" header-align="center" align="left"></el-table-column>
        <el-table-column prop="employeeName" label="姓名" width="120" header-align="center" align="left"></el-table-column>
        <el-table-column prop="employeeIdCard" label="证照号码" width="160" header-align="center" align="left"></el-table-column>
        <el-table-column prop="incomeDate" label="所属税期" width="120" header-align="center" align="center" :formatter="formatDateFun"></el-table-column>
        <el-table-column prop="itemTypeDesc" label="所得项目" width="300" header-align="center" align="left"></el-table-column>
        <el-table-column prop="plannedAmount" label="本期收入" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="nativePlace" label="基本养老保险费" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="workStatus" label="基本医疗保险费" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="entryDate" label="失业保险费" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="accfundAmount" label="住房公积金" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="childrenDeduct" label="累计子女教育" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="educationDeduct" label="累计继续教育" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="diseaseDeduct" label="累计大病扣除" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="olderManDeduct" label="累计赡养老人" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="roomLoanDeduct" label="累计住房贷款利息" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="roomRentDeduct" label="累计住房租金" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="workStatus" label="应补（退）税额" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="entryDate" label="企业（职业）年金" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="leaveDate" label="商业健康保险" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="nativePlace" label="税延养老保险" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="workStatus" label="其他" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="entryDate" label="减免税额" width="150" header-align="center" align="right"></el-table-column>
        <el-table-column prop="leaveDate" label="准予扣除的捐赠额" width="150" header-align="center" align="right"></el-table-column>
      </dTable>

    </div>
  </div>
</template>
<script>
  import dTable from '../../../components/common/table'
  export default {
    components: {
      dTable
    },
    data () {
      return {
        // 导航
        pathData: [
          {name: '薪酬管理'},
          {name: '个税报表', path: '/taxReport'},
          {name: '报表明细', path: '/taxReportDetail'},
        ],
        withholdingAgent: '',//扣缴义务人
        salaryPlatformBillNumber : '',
        searchWord: ''
      }
    },
    created () {
      this.withholdingAgent = this.$route.query.withholdingAgent
      this.salaryPlatformBillNumber = this.$route.query.salaryPlatformBillNumber
      this.$nextTick(() => {
        this.getTableData()
      })
    },
    computed: {
      tableHeight: function () {
        return this.$global.bodyHeight - 230 + 'px'
      }
    },
    methods: {
      formatDateFun(row, column, cellValue, index){
        return cellValue == null ? '-' : this.$global.dateToStrByFormart(cellValue,'yyyy-MM')
      },
      getTableData (params = []) {
        params = [{property: "salaryPlatformBillNumber", value: this.salaryPlatformBillNumber}, {property: "selectMsg", value: this.searchWord}]
        this.$refs.empTable.fetch(params, 'post', '/salary/accounting/personalIncomeTaxDetail')
      },
      exportDetail(){
        var requestParams = this.$refs.empTable.requestParams
        this.$downloadFile('/salary/accounting/personalIncomeTaxExport','post',
          this.$qs.stringify({salaryPlatformBillNumber:requestParams.query[0].value,selectMsg:requestParams.query[1].value}),this.$global.EXCEL)
      }
    }
  }
</script>
<style lang="less" scoped>
  .tax-teport-detail-container {
    position: relative;
    height: 100%;
  }

  .content-tb {
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }

  .search-row {
    .label-text {
      width: 100px;
    }
  }
</style>
